<template>
  <view class="detail-page">
    <!-- 顶部图标和金额区域 -->
    <view class="header-section">
      <view class="icon-container" :class="transactionType">
        <text class="icon-text">{{ iconText }}</text>
      </view>
      <text class="transaction-title">{{ transactionTitle }}</text>
      <text class="transaction-amount" :class="transactionType">{{ transactionAmount }}</text>
    </view>

    <!-- 分隔线 -->
    <view class="divider"></view>

    <!-- 详细信息区域 -->
    <view class="detail-section">
      <view class="detail-item" v-for="(detail, index) in detailList" :key="index">
        <text class="detail-label">{{ detail.label }}</text>
        <text class="detail-value" :class="detail.highlight ? 'highlight' : ''">{{ detail.value }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      transactionType: 'recharge', // recharge 或 refund
      iconText: '充',
      transactionTitle: '充值',
      transactionAmount: '+20.00',
      detailList: [],
      orderData: null // 新增订单数据属性
    }
  },
  onLoad(options) {
    // 从父级获取交易类型和订单数据
    this.transactionType = options.type || 'recharge';
    
    // 解析传递的订单数据
    if (options.orderData) {
      try {
        this.orderData = JSON.parse(decodeURIComponent(options.orderData));
        console.log('接收到的订单数据:', this.orderData);
      } catch (error) {
        console.error('解析订单数据失败:', error);
      }
    }
    
    this.initData();
  },
  methods: {
    initData() {
      if (this.orderData) {
        // 使用真实订单数据
        this.initRealData();
      } else {
        // 使用默认数据
        if (this.transactionType === 'recharge') {
          this.initRechargeData();
        } else {
          this.initRefundData();
        }
      }
    },
    
    // 使用真实订单数据初始化
    initRealData() {
      const data = this.orderData;
      
      if (this.transactionType === 'recharge') {
        // 充值详情
        this.iconText = '充';
        this.transactionTitle = data.title || '充值';
        this.transactionAmount = `+${data.advanceTotal}`;
        
        this.detailList = [
          { label: '充值场景', value: '启动充电' },
          { label: '支付方式', value: this.getPaymentMethodText(data) },
          { label: '充值时间', value: this.formatTime(data.createTime) },
          { label: '交易单号', value: data.orderNumber || '' },
          { label: '支付平台单号', value: data.paymentPlatformNumber || '' }
        ];
      } else {
        // 退款详情
        this.iconText = '退';
        this.transactionTitle = '退款';
        const refundAmount = (data.cashPayRefund || 0) + (data.chargeBalanceRefund || 0);
        this.transactionAmount = `-${refundAmount}`;
        
        this.detailList = [
          { label: '退款状态', value: '已退款', highlight: true },
          { label: '退款方式', value: `原路退回 (${this.getPaymentMethodText(data)})` },
          { label: '发起时间', value: this.formatTime(data.createTime) },
          { label: '退款时间', value: this.formatTime(data.refundTime) },
          { label: '交易单号', value: data.orderNumber || '' },
          { label: '退款单号', value: data.refundNumber || '' }
          // { label: '退款原因', value: data.refundReason || '' }
        ];
      }
    },
    
    // 获取支付方式文本
    getPaymentMethodText(record) {
      const chargeBalanceAdvance = record.chargeBalanceAdvance || 0;
      const cashAdvance = record.cashAdvance || 0;
      
      if (chargeBalanceAdvance > 0 && cashAdvance > 0) {
        return '组合支付';
      } else if (chargeBalanceAdvance > 0) {
        return '钱包余额支付';
      } else {
        return '微信支付';
      }
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '';
      // 处理时间格式，去掉毫秒部分
      return timeStr.split('.')[0].replace('T', ' ');
    },
    initRechargeData() {
      this.iconText = '充';
      this.transactionTitle = '充值';
      this.transactionAmount = '+20.00';
      this.detailList = [
        { label: '充值场景', value: '启动充电' },
        { label: '支付方式', value: '微信支付' },
        { label: '充值时间', value: '2025-07-07 09:46:35' },
        { label: '交易单号', value: 'CA123456789123456789' },
        { label: '充电单号', value: 'MA00512345678901234567890' }
      ];
    },
    initRefundData() {
      this.iconText = '退';
      this.transactionTitle = '退款';
      this.transactionAmount = '-20.00';
      this.detailList = [
        { label: '退款状态', value: '已退款', highlight: true },
        { label: '退款方式', value: '原路退回 (微信支付)' },
        { label: '发起时间', value: '2025-07-07 09:46:35' },
        { label: '退款时间', value: '2025-07-07 09:46:45' },
        { label: '交易单号', value: 'CA123456789123456789' },
        { label: '退款单号', value: 'RE0025070317371234567890' }
        // { label: '退款原因', value: '用户手动停止充电' }
      ];
    }
  }
}
</script>

<style scoped>
.detail-page {
  background: #fff;
  min-height: 100vh;
  padding: 0;
  width: 90%;
  margin: 0 auto;
}

/* 顶部区域 */
.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx 40rpx 30rpx;
}

.icon-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.icon-container.recharge {
  background: #ff6b35;
}

.icon-container.refund {
  background: #52c41a;
}

.icon-text {
  color: #fff;
  font-size: 48rpx;
  font-weight: bold;
}

.transaction-title {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.transaction-amount {
  font-size: 48rpx;
  font-weight: bold;
}

.transaction-amount.recharge {
  color: #333;
}

.transaction-amount.refund {
  color: #333;
}

/* 分隔线 */
.divider {
  height: 1rpx;
  background: #f0f0f0;
  margin: 0 30rpx;
}

/* 详细信息区域 */
.detail-section {
  padding: 30rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 28rpx;
  color: #999;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  flex: 1;
  margin-left: 20rpx;
}

.detail-value.highlight {
  color: #52c41a;
  font-weight: bold;
}
</style> 